<!--
  ~ Copyright (c) 2020 the original author or authors
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      https://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  ~ or implied. See the License for the specific language governing
  ~ permissions and limitations under the License.
  -->

<mat-toolbar class="header">
  <mat-toolbar-row class="container">
    <div class="header--logo">
      <a class="header--logo_link" mat-flat-button (click)="onNavigate('/')">
        <img class="logo-main" src="assets/img/face-recognition-logo.svg" alt="{{ 'toolbar.logo' | translate }}" />
        <img class="logo-mobile" src="assets/img/face-recognition-logo-mobile.svg" alt="{{ 'toolbar.logo' | translate }}" />
      </a>
    </div>
    <div class="header--user-info">
      <ng-container *ngIf="!isUserInfoAvailable">
        <button class="user-info--btn" mat-flat-button (click)="goSignUp()">
          <span>{{ 'toolbar.signup' | translate }}</span>
        </button>
      </ng-container>
      <ng-container *ngIf="isUserInfoAvailable">
        <button
          class="user-info--btn"
          mat-flat-button
          [matMenuTriggerFor]="menu"
          (menuClosed)="changeArrowIcon()"
          (menuOpened)="changeArrowIcon()"
        >
          <div class="user-info--btn_wrapper">
            <img class="avatar" [src]="userAvatarInfo" alt="{{ 'toolbar.user_avatar_info' | translate }}" />
            <span class="name">{{ userFirstName }} {{ userLastName }}</span>
            <mat-icon inline="true" svgIcon="{{ openMenu ? 'expand-less' : 'expand-more' }}"></mat-icon>
          </div>
        </button>
      </ng-container>
    </div>
    <mat-menu #menu="matMenu" xPosition="before" [overlapTrigger]="false">
      <button mat-menu-item (click)="onEditUserInfo()">
        <span>{{ 'toolbar.user_info' | translate }}</span>
      </button>
      <button mat-menu-item (click)="onChangePassword()">
        <span>{{ 'toolbar.change_password' | translate }}</span>
      </button>
      <button class="button-warn" mat-menu-item (click)="doLogout()">
        <span>{{ 'toolbar.logout' | translate }}</span>
      </button>
    </mat-menu>
  </mat-toolbar-row>
</mat-toolbar>
